<template>
  <el-form ref="loginform" :model="loginFormData" status-icon :rules="rules" label-width="55px" class="demo-ruleForm">
    <el-form-item label="用户名" prop="username" class="username-form-item">
      <el-input v-model="loginFormData.username" type="input" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密码" prop="password" class="password-form-item">
      <el-input v-model="loginFormData.password" type="password" autocomplete="off" />
    </el-form-item>

    <el-form-item label="验证码" prop="capture" class="capture-fologinFormDatarm-item" @keydown.enter="submitForm(loginform)" >
      
      <el-input v-model="loginFormData.capture"   />
      <span class="capture-span" v-html="captcha" @click="updated"> </span>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click.prevent="submitForm(loginform)" class="dlogin">
        登入
      </el-button>

    </el-form-item>
  </el-form>
</template>


<script  setup>
import { ElLoading } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
import * as api from "../../api/users.js"
import { useRouter } from 'vue-router'
import{ useUser} from "../../store/users"
// 引入校验函数
// 不高亮，可以删除validateUsername,validatePassword,validateCapture,
import { rules, useSubmitForm, } from "../../composition/login/validate"
let router =useRouter()
// 引入loading加载框 

let userStore=useUser()
//表单校验成功之后，回调的方法
let loadingInstance=null
let validateSuccess = () => {
  // 发起登入请求
  loadingInstance= ElLoading.service({
  lock:true,
  text:'正在登入...',
  background:"rgba(0,0,0,.3)"
})

setTimeout(() => {
  
}, 2000);
  //1.登入请求之前要先校验验证码
  verifyCaptcha(loginFormData.capture)
  // console.log("oooo");
  // console.log('校验成功');
}
// 表单校验失败
let validateFailed = () => {
  // console.log('校验失败');
  loadingInstance.close()

}

let submitForm = useSubmitForm(validateSuccess, validateFailed)

const loginform = ref()

// 注入表单数据
const loginFormData = reactive({
  username: 'admin',
  password: 'admin',
  capture: '',
})


// 首次页面加载调用
onMounted(() => {
  getCaptcha();
  // api.getCaptureApi().then(res => {
  //   // console.log(res.data.img,"iiiii");
  //   val.value = res.data.img
  // })
  loadingInstance&&loadingInstance.close()
});



// 登陆密码

let login = async () => {
  // 调用登入请求接口(用户名密码)
  let res = await api.loginApi(loginFormData.username, loginFormData.password)
  // console.log(res);
  if(res.data.state){
    // 存储token，存储到sessionStorage中
    sessionStorage.setItem('pbz-token',res.data.token)
    // 关闭loading加载动画框
    loadingInstance.close()
    userStore.$patch({userInfo:res.data.userInfo})
    // console.log(router,99);
    router.push('/')
 
  }
}

// 获取验证码
let captcha = ref()
let getCaptcha =async()=>{
  let res = await api.getCaptureApi()
  if (res.data.state) captcha.value = res.data.img;
}





// 校验验证码：
// 时间本地表单校验通过
// 2通过接口表单   

let verifyCaptcha = async () => {
  try {
    //表示验证码校验通过
    //发起登入请求
    let res = await api.verifyCapture(loginFormData.capture);
    loadingInstance.close()
    // console.log(res);
    if(res.data.state){
      login(loginFormData.username, loginFormData.password);
      router.push('/login')
    }
   
  } catch (e) {
    //验证码校验失败了,需要重新刷新一个新的验证码
   getCaptcha()
    //关闭loading加载动画框
    loadingInstance.close()
  }
}
</script>

<style scoped lang="less">
.capture-span{

  :deep(svg){
    width: 100px;
    height: 20px;
  }
}
.el-input {
  width: 120px;
 :deep(.el-input__wrapper){
border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: none;
 }
}
.dlogin{
  width: 240px;
}

</style>


